<template>
  <div>
    <operation-title
      title="导航(此组件需咨询开发后填写！！)"
      :icon="TitleIcon"
    />
    <div class="divider"></div>
    <div class="func">
      <p class="attr">选择样式</p>
      <div class="adjust-item">
        <el-radio-group v-model="config.pageConfig.type">
          <el-radio :label="1">图标+文字</el-radio>
          <el-radio :label="2">图标</el-radio>
          <el-radio :label="3">文字</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">选择颜色</p>
      <div class="adjust-item">
        <span>背景颜色</span>
        <el-color-picker v-model="config.pageConfig.bgcolor" />
        <span>{{ config.pageConfig.color }}</span>
      </div>
      <div class="adjust-item">
        <span>默认</span>
        <el-color-picker v-model="config.pageConfig.unselectcolor" />
        <span>{{ config.pageConfig.unselectcolor }}</span>
      </div>
      <div class="adjust-item">
        <span>选中</span>
        <el-color-picker v-model="config.pageConfig.selectcolor" />
        <span>{{ config.pageConfig.selectcolor }}</span>
      </div>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">导航图片<span class="red">(图片可换，删除或新增请咨询开发)</span></p>
      <div class="adjust-item">
        <div style="display:flex;">
          <div v-for="(item, index) in config.pageConfig.tabList" :key="index" class="image-list"
            @click="config.pageConfig.currentIndex = index">
            <img v-if='config.pageConfig.currentIndex == index && item.custom == true' :src="item.imageUrl" alt="">
            <img v-else-if='config.pageConfig.currentIndex != index && item.custom == true' :src="item.unImgUrl" alt="">
            <span v-else class="iconfont" :class="'icon-' + item.iconUrl"></span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" @confirm="sliceItem(index)" :title="
              index==0?'首页不可删除!':(index!=0&&config.pageConfig.tabList.length > 1)
                ? '确定删除吗？'
                : '最少需要两个'
            ">
              <template #reference>
                <el-icon class="sure-close">
                  <Close />
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
          <div v-if='config.pageConfig.tabList.length < 5' @click="addItem" class="image-list"
            style="border:1px dashed #eee;">
            <el-icon>
              <Plus />
            </el-icon>
          </div>
        </div>
      </div>
      <p>最多可添加5个</p>
      <div class="adjust-item">
        <span>自定义</span>
        <el-switch v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].custom" />
      </div>
      <div class="adjust-item" v-if='config.pageConfig.tabList[config.pageConfig.currentIndex].custom'
        :style="{ height: '100px' }">
        <span>图片</span>
        <div style="margin-right:20px;" class="upload-img">
          <el-image v-if='config.pageConfig.tabList[config.pageConfig.currentIndex].imageUrl'
            style="width: 100%; height: 100%" :src="config.pageConfig.tabList[config.pageConfig.currentIndex].imageUrl"
            fit="contain"></el-image>
          <div class="upload-img_cover">
            <Upload :model-value="fileList" file-path="act/" :limit="999" :show-file-list="false"
              @success="uploadSuccess">
              <el-button size="small">替换</el-button>
            </Upload>
          </div>
          <p>选中</p>
        </div>
        <div class="upload-img">
          <el-image v-if="config.pageConfig.tabList[config.pageConfig.currentIndex].unImgUrl"
            style="width: 100%; height: 100%" :src="config.pageConfig.tabList[config.pageConfig.currentIndex].unImgUrl"
            fit="contain"></el-image>
          <div class="upload-img_cover">
            <Upload :model-value="fileList" file-path="actapp/" :limit="999" :show-file-list="false"
              @success="uploadSuccess2">
              <el-button size="small">替换</el-button>
            </Upload>
          </div>
          <p>未选中</p>
        </div>
      </div>
      <div class="adjust-item" v-else>
        <span>图标</span>
        <div>
          <span @click="showDialog" class="iconfont"
            :class="'icon-' + config.pageConfig.tabList[config.pageConfig.currentIndex].iconUrl"></span>
        </div>
      </div>
      <div class="adjust-item">
        <span>标题</span>
        <el-input v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].title" maxlength="5"
          :show-word-limit="true" />
      </div>
      <div class="adjust-item">
        <span style="width:110px;">跳转方式(必填)</span>
        <el-radio-group v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].linkType">
          <el-radio :label="1">链接(https或http开头)</el-radio>
          <el-radio :label="2">关键字</el-radio>
        </el-radio-group>
      </div>
      <div class="adjust-item" v-if='config.pageConfig.tabList[config.pageConfig.currentIndex].linkType==""||config.pageConfig.tabList[config.pageConfig.currentIndex].linkType==2'>
        <span style="width:100px;">关键字(必填)</span>
        <!-- <el-input placeholder='请咨询开发后填写' v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].keyword" /> -->
        <el-select v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].keyword" placeholder="请咨询开发后填写">
          <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value"
            :disabled="disabledStatus(item.value)">
          </el-option>
        </el-select>
      </div>
      <div class="adjust-item" v-if='config.pageConfig.tabList[config.pageConfig.currentIndex].linkType==1'>
        <span style="width:100px;">链接(必填)</span>
        <el-input placeholder='请添加https或http开头' v-model="config.pageConfig.tabList[config.pageConfig.currentIndex].keyword" />
      </div>
    </div>

    <icon-selector
      v-model:show="dialogFormVisible"
      @select="(value) => config.pageConfig.tabList[config.pageConfig.currentIndex].iconUrl = value"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "FootbarOperation",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import TitleIcon from "@/assets/app/icon/tabbar.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
const typeList = ref([
  {
    name: '首页',
    value: "Home"
  },
  {
    name: '分类',
    value: "Classify"
  },
  {
    name: '个人中心',
    value: "Person"
  }
]);
const disabledStatus = (status: string) => {
  let flag = false
  config.pageConfig.tabList.forEach(i => {
    if (i.keyword == status) {
      flag = true
    }
  })
  return flag
}
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      type: 1,
      bgcolor: "#fff",
      unselectcolor: "#969799",
      selectcolor: "#FF3B30",
      currentIndex: 0,
      tabList: [
        {
          title: "首页",
          custom: true,
          iconUrl: "home",
          imageUrl: './imagesStatic/1661756860000Fhe8Icon-shouye-xuanhzong.png',
          unImgUrl: './imagesStatic/1661756963000APA3Icon-shouye.png',
          keyword: "Home",
          linkType:2
        },
        {
          title: "分类",
          custom: true,
          iconUrl: "fenlei",
          imageUrl: './imagesStatic/1661757055000dwYnicon-fenlei-xuanhzong.png',
          unImgUrl: './imagesStatic/16617571070006Pz8icon-fenlei.png',
          keyword: "Classify",
          linkType:2
        },
        {
          title: "购物车",
          custom: true,
          iconUrl: "shop-car",
          imageUrl: './imagesStatic/1658732706000.png',
          unImgUrl: './imagesStatic/1658732741000.png',
          keyword: "Shopcar",
          linkType:2
        },
        {
          title: "个人中心",
          custom: true,
          iconUrl: "icon03",
          imageUrl: './imagesStatic/1661757148000rAZZIcon-xuanhzong-wode.png',
          unImgUrl: './imagesStatic/1661757173000SAK7Icon-wode.png',
          keyword: "Person",
          linkType:2
        },
      ],
    },
  },
});
let emits = defineEmits<{ (e: "changeStyle", configStyle: Object): void }>();
const addItem = () => {
  config.pageConfig.tabList.push({
    title: "",
    custom: true,
    iconUrl: "plus",
    imageUrl: './imagesStatic/default_picture.png',
    unImgUrl: './imagesStatic/default_picture.png',
    keyword: "",
    linkType:2
  })
  config.pageConfig.currentIndex = config.pageConfig.tabList.length - 1
};
const fileList = ref([]);
const uploadSuccess = (value: any) => {
  config.pageConfig.tabList[config.pageConfig.currentIndex].imageUrl = value.url;
};
const uploadSuccess2 = (value: any) => {
  config.pageConfig.tabList[config.pageConfig.currentIndex].unImgUrl = value.url;
};
const dialogFormVisible = ref(false);
const resetForm = () => {
  dialogFormVisible.value = false;
};
const showDialog = () => {
  dialogFormVisible.value = true;
};
const submitForm = (item: string) => {
  config.pageConfig.tabList[config.pageConfig.currentIndex].iconUrl = item;
  dialogFormVisible.value = false;
};
const sliceItem = (idx: Number) => {
  if(idx==0){
    return;
  }else{
    if (config.pageConfig.tabList.length < 3) {
    return;
  } else {
    config.pageConfig.tabList.splice(idx, 1);
    config.pageConfig.currentIndex = 0
  }
  }
};
watch(config, (val) => {
  emits("changeStyle", config.pageConfig);
});
</script>

<style lang="scss" scoped>
.title {
  padding: 8px 23px;
  overflow: hidden;
  border-bottom: 5px solid #f6f7f9;
  display: flex;
  position: relative;
  height: 50px;
  box-sizing: border-box;

  img {
    position: absolute;
    left: 0;
    top: -5px;
  }

  h5 {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 50px;
  }
}

.func {
  border-bottom: 5px solid #f6f7f9;
  padding: 20px 16px;
  font-size: 16px;

  .attr {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px;
  }

  ul.common-ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      flex: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0 0 4px;
      border: 1px solid #ededed;
      border-collapse: collapse;

      &.active {
        border: 1px solid #fb6638;
      }

      img {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }

  h4 {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }

  div.adjust-item {
    display: flex;
    align-items: center;
    margin-top: 3px;
    margin-bottom: 10px;

    span {
      width: 64px;
      text-align: right;
      margin-right: 15px;
      color: #666;
    }

    .iconfont {
      font-size: 26px;
    }

    :deep(.el-slider) {
      width: 240px;
      margin-right: 3px;
      margin-left: 15px;
    }

    :deep(.el-slider__runway.show-input) {
      margin-right: 15px;
    }

    :deep(.el-input-number) {
      width: 100px;
      background: #f4f3f7;
      border: 1px solid #f4f3f7;
    }

  }

  .add-item {
    width: 100%;
    list-style: none;



    li {
      background: #f4f3f7;
      border-radius: 4px;
      padding: 10px 20px 10px 10px;
      color: #999;
      margin-top: 10px;
      margin-bottom: 20px;
      position: relative;

      .add-item-input {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        >p {
          width: 50px;
          margin-right: 10px;
        }

        > :deep(.el-icon) {
          font-size: 40px;
        }

        img {
          width: 40px;
          height: 40px;
        }

        :deep(.el-color-picker) {
          margin-right: 10px;
        }
      }

      .sure-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }

    .extra-li {
      text-align: center;
    }
  }
}

.image-list {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
  }

  .sure-close {
    display: none;
    position: absolute;
    top: 2px;
    right: 0px;
  }

  &:hover {
    .sure-close {
      display: block;
    }
  }
}

.upload-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  position: relative;

  :deep(.el-image) {
    width: 50px;
    height: 50px;
  }

  &:hover {
    .upload-img_cover {
      opacity: 1;
    }
  }

  .upload-img_cover {
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
}

:deep(.el-upload-list) {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

:deep(.el-upload--picture-card) {
  width: 50px;
  height: 50px;
}

.red {
  color: red;
}
:deep(.el-dialog) {
  .icon-div-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  div.icon-div {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: 1px solid #47565d;
    margin: 10px;

    span {
      font-size: 30px;
    }
  }
}
</style>
